<!--
 * @Author: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @Date: 2023-10-15 20:38:26
 * @LastEditors: 姚沈阳 11500793+yao-shenyang@user.noreply.gitee.com
 * @LastEditTime: 2023-10-23 19:53:32
 * @FilePath: \uni-preset-vue-vite-ts\src\pages\home\index.vue
 * @Description: 
 * qq1908552310
-->
<template>
	<view class="home_container">
		<div class="home_header">
			<div class="header_title">
				火车票预订
			</div>
			<div class="header_desc">
				便捷购票服务您的每一次出行
			</div>
			<div class="header_selected">
				<div class="selected_tab">
					<picker class="departureIndex" mode="selector" :range="resdata.stations" @change="onDepartureChange"
						:value="resdata.departureIndex">
						<text v-if="resdata.departureIndex == -1">选择起驶站点</text>
						<text v-else>{{ resdata.stations[resdata.departureIndex] }}</text>
					</picker>

					<div>
						<image @click="flip" style="width: 67rpx; height: 44rpx;" src="../../static/PNG/1x/Icon/切换.png"
							mode="">
						</image>

					</div>
					<picker class="arrivalIndex" mode="selector" :range="resdata.stations" @change="onArrivalChange"
						:value="resdata.arrivalIndex">
						<text v-if="resdata.arrivalIndex == -1">选择到达站点</text>
						<text v-else>{{ resdata.stations[resdata.arrivalIndex] }}</text>
					</picker>
				</div>
				<div class="example_body">
					<uni-datetime-picker type="date" v-model="dateTime.single" @maskClick="maskClick" @change="change"
						@changeLog="changeLog">{{ dateTime.data }} <span>{{ dateTime.day }}</span></uni-datetime-picker>
				</div>
				<div class="onSearch">
					<button @click="onSearch">查询</button>
				</div>
				<div class="seleced_footer">
					<text v-if="historys.flage">{{ resdata.stations[0] }}-{{ resdata.stations[3] }}</text>
					<text v-else>暂无历史</text>
					<text @click="clearhistory">清除历史</text>
				</div>
			</div>
		</div>
		<div class="home_main">
			<div class="main_header">
				<!-- <iui-swiper :list="ImageSwiper.list" indicatorType="line" :radius="10"
					:key="ImageSwiper.index"></iui-swiper> -->
			</div>
			<div class="main_container">
				<div class="main_container_header">
					<span>出行咨询</span> <span>更多</span>
				</div>
				<div v-for="(item, index) in Toingout.list" :key="index" class="main_container_main">
					<div class="list_left">
						<span>{{ index + 1 }}</span>
					</div>
					<div class="list_content">
						<div class="list_contents">
							{{ item.title }}
						</div>
						<div class="list_contents">
							{{ item.desc }}
						</div>
						<div class="list_contents list_contentsa">
							<span>{{ item.name }}</span> <span class="time">{{ item.time }}</span>
						</div>
					</div>
					<div class="list_right">
						<image :src="item.img">
						</image>
					</div>
				</div>
			</div>
		</div>

	</view>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useHomeStore } from '@/modules/home'
const homeStore = useHomeStore()
const db = uniCloud.database();
// 地址
const resdata: any = reactive({
	stations: "",
	departureIndex: 0,
	arrivalIndex: 3,
})
// 历史
const historys: any = reactive({
	flage: true
})
// 时间
const dateTime: any = reactive({
	single: '',
	data: "",
	day: ""
})
// 轮播图
const ImageSwiper = reactive({
	index: [1, 2, 3],
	list: [
		"https://img1.baidu.com/it/u=3925235955,962735369&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1697648400&t=2968186d9b52208c83a0bc88ef7d6b6b",
		"https://img1.baidu.com/it/u=2675741901,3940178090&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697648400&t=982b7f29108cfaeeedc7d95d20f61383",
		"https://img1.baidu.com/it/u=2254479832,390160188&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1697648400&t=3d7e90eba2b01ec724c6cfd063da3974",
	]
})

const Toingout: any = reactive({
	list: []
})

const getCity = async () => {
	// 在云函数中获取所有城市数据
	const cityCollection = db.collection('opendb-city-china');
	const res = await cityCollection.get();
	const city: any = res.result.data.map((item: any) => item.name)
	const citylist = city.filter((item: any) => item.includes("市") || item.includes("县"))
	resdata.stations = citylist
}
const onDepartureChange = (event: any) => {
	resdata.departureIndex = event.target.value;
	console.log(event, "event")
}
const onArrivalChange = (event: any) => {
	resdata.arrivalIndex = event.target.value;
	console.log(event, "event")
}
const flip = () => {
	console.log(resdata, "resdata")
	let left = resdata.departureIndex
	let right = resdata.arrivalIndex
	resdata.departureIndex = right
	resdata.arrivalIndex = left
}
const onSearch = () => {
	const departure: any = resdata.stations[resdata.departureIndex].replace("市", "")
	const arrival = resdata.stations[resdata.arrivalIndex].replace("市", "")
	console.log(departure)
	console.log(arrival)

	console.log(dateTime.data, "dateTime")
	// 发起搜索请求
	// 去搜索
	uni.navigateTo({
		url: `/pages/home/search/index?departure=${departure}&arrival=${arrival}&date=${dateTime.single}`,
		success: function (res) {
			console.log('跳转成功');
		}
	})
}
const clearhistory = () => {
	historys.flage = false
	console.log("清楚历史");

}
const change = (e: any) => {
	let time = e.split("-")[1] + "月" + e.split("-")[2] + "日"
	dateTime.data = time;
	const selectedDate = new Date(e);
	const currentDate = new Date();
	console.log(selectedDate, "选择的时间")
	console.log(currentDate, "当前时间")
	// 转成时间戳
	const selectedTimestamp = selectedDate.getTime();
	const currentTimestamp = currentDate.getTime();
	// 计算时间差（以天为单位）
	const timeDiff = Math.floor((selectedTimestamp - currentTimestamp) / (1000 * 60 * 60 * 24));
	// 判断时间差并进行相应处理
	if (timeDiff === -2) {
		dateTime.day = "昨天"
		console.log("用户选择的日期是昨天");
	} else if (timeDiff === -1) {
		dateTime.day = "今天"
		console.log("用户选择的日期是今天");
	} else if (timeDiff === 0) {
		dateTime.day = "明天"
		console.log("用户选择的日期是明天");
	} else if (timeDiff === 1) {
		dateTime.day = "后天"
		console.log("用户选择的日期是后天");
	} else {
		dateTime.day = ""
		console.log("用户选择的日期不是昨天、今天、明天或后天");
	}
}
const changeLog = (e: any) => {
	console.log('change事件:', e);
}
const maskClick = (e: any) => {
	console.log('maskClick事件:', e);
}

// 获取列表数据
const getListToingout = async () => {
	await homeStore.getList()
	Toingout.list = homeStore.count
}
onMounted(() => {
	getListToingout()
	getCity()
	setTimeout(() => {
		dateTime.datetimesingle = Date.now() - 2 * 24 * 3600 * 1000
		dateTime.single = '2023-10-23'
		dateTime.data = "10月23日"
		dateTime.day = "今天"
	}, 3000)
})
</script>

<style lang="scss" scoped>
.home_container {
	width: 100%;
	height: 100vh;
	background-color: #d6d6d6;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	overflow: hidden;

	.home_header {
		width: 100%;
		height: 500rpx;
		background-color: rgba(27, 169, 186);
		position: relative;

		.header_title {
			width: 100%;
			height: 100rpx;
			padding-left: 40rpx;
			color: #fff;
			position: absolute;
			top: 180rpx;
			font-size: 60rpx
		}

		.header_desc {
			width: 100%;
			height: 100rpx;
			color: #fff;
			padding-left: 40rpx;
			position: absolute;
			top: 280rpx;
		}

		.header_selected {
			width: 720rpx;
			height: 400rpx;
			background-color: #fff;
			position: absolute;
			border-radius: 10px;
			top: 360rpx;
			left: 18rpx;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: center;

			.selected_tab {
				height: 110rpx;
				width: 680rpx;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-bottom: solid 1px #b1b1b1;

				.departureIndex {
					font-size: 30rpx
				}

				.arrivalIndex {
					font-size: 30rpx
				}
			}

			.example_body {
				width: 680rpx;
				height: 100rpx;
				padding-left: 50rpx;
				line-height: 100rpx;

			}

			.onSearch {
				width: 680rpx;
				height: 100rpx;

				button {
					border-radius: 63rpx;
					border: none;
					background-color: rgba(255, 131, 0);
					color: #fff;
				}
			}

			.seleced_footer {
				width: 680rpx;
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}
	}

	.home_main {
		margin-top: 80rpx;
		border-radius: 20rpx;
		width: 710rpx;
		height: 500rpx;

		.main_header {
			width: 710rpx;
			height: 260rpx;
			background-color: #b1b1b1;
		}

		.main_container {
			width: 100%;
			background: #fff;
			border-radius: 20rpx;
			height: 240px;
			overflow-y: scroll;
			margin-top: 20rpx;

			.main_container_header {
				box-sizing: border-box;
				width: 100%;
				height: 60rpx;
				display: flex;
				justify-content: space-between;
				padding-left: 20rpx;
				padding-right: 20rpx;
				align-items: center;
				border-bottom: solid 1px #b1b1b1;

			}

			.main_container_header :first-child {
				font-weight: 800;
			}

			.main_container_main {
				width: 100%;
				height: 185rpx;
				margin-top: 10px;
				display: flex;
				border-bottom: solid 1px #b1b1b1;

				.list_left {
					width: 60rpx;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					color: red;
					font-weight: 800;
					font-size: 20px;
				}

				.list_content {
					width: 400rpx;
					height: 100%;
					text-indent: 10px;

					.list_contents {
						width: 100%;
						height: 63rpx;
						font-size: 30rpx;
						align-items: center;
					}

					.list_contentsa {
						color: #635e5e;

						.time {
							margin-left: 20px;
						}
					}
				}

				.list_right {
					width: 250rpx;
					background-color: #fff;
					height: 100%;

					image {
						width: 90%;
						height: 90%;
						margin: auto;
					}
				}
			}
		}
	}
}
</style>